<template>
	<view class="title">
		<span class="boxTopType" @click="upShow(1)">关注</span>
		<span @click="upShow(2)">推荐</span>
		<wd-icon name="search" class="logo" @click="Search"></wd-icon>
	</view>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const show = ref(2);
const upShow = (value) => {
	show.value = value;
	if (value == 2) {
		uni.navigateTo({
			url: '/pages/Home/Home'
		});
	} else {
		uni.navigateTo({
			url: '/pages/guanzhu/guanzhu'
		});
	}
};
const Search = () => {
	uni.navigateTo({
		url: '/pages/Search/Search'
	});
};
</script>

<style lang="scss" scoped>
@media (min-width: 800px) {
	.title {
		width: 100%;
		height: 80px;
		background-color: black;
		font-size: 30px;
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
		top: 0;
		.logo {
			position: absolute;
			margin-right: 50px;
			right: 0%;
			line-height: 1rem;
			color: #b3adad;
			font-size: 30px;
		}
		span {
			font-size: 30px;
			color: #b3adad;
			margin: 3vw;
		}
	}
}
@media (max-width: 800px) {
	.title {
		width: 100vw;
		height: 70px;
		background-color: black;
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
		top: 0;
	}
	.logo {
		position: absolute;
		margin-right: 20px;
		right: 0%;
		line-height: 1rem;
		color: #b3adad;
		font-size: 25px;
	}
	span {
		font-size: 25px;
		color: #b3adad;
		margin: 1.5rem;
	}
}
.boxTopType {
	color: white;
	border-bottom: 2px solid white;
}
</style>
